<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=C2b42eb4a9ea4cd555d0fc891caf9095"></script>
<link rel="Stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/house.css" />
<script>
	$(function() {
		$('[data-toggle="popover"]').popover()
	})	
</script>
<style type="text/css">
* {
	margin: 0 auto;
	padding: 0;
	
}


.tanchuang {
	height: 400px;
	width: 40%;
	background: rgba(0, 0, 0, 0.3);
	position: relative;
	top: 50px;
	border: 1px solid black;
	box-shadow: -5px -2px 6px mediumseagreen inset;	
	display: none;
	position: absolute;
	left:30%;
	top:50%;
	text-align: center;
	color:white;
	z-index: 3;
}

.tope {
	height: 50px;
	width: 100%;
	
}
.toname{
	height:50px;
	width:95%;
	float:left;
	line-height: 50px;
	font-size: 24px;
}
.guanbi{
	height:50px;
	width:4%;
	float:left;
	font-size: 24px;
	
}
.guanbi a{
	color:red;
	text-decoration: none;
}
.message {
	height: 200px;
	width: 100%;
}

.liuyan {
	height: 200px;
	width: 20%;
	font-size: 24px;
	float: left;
}
.liuyankuang{
	height:200px;
	width:80px;
	text-align:left;
	float:left;
	color:black;
}
.send {
	height: 50px;
	width: 100%;
	text-align: center;
}

.send input {
	height: 50px;
	width: 66%;
	background: rgba(0,0,0,0.1);
	margin-left: 6%;
}
#zhutiyemian{
		height:2050px;
		width:100%;
		top:0;
		left:0;
		display: none;
		background-color: #F3F3F3;
		background: rgba(0,0,0,0.1);		
		z-Index:1;
		position: absolute;
}
</style>
	
<div class="container">
	<div class="row" style="margin-top: 50px;">
		<div class="col-md-8">
			<h2>${house.topic}</h2>
			<span class="t1">${house.price}<label style="font-size: 13px;">元/月</label></span>
			<span style="padding: 0 20px;">${house.type.name}</span>
			<div class="photo">
				<img src="${pageCountext.request.contextPath}images/${house.photo.filename}" />
			</div>
		</div>
		<div class="col-md-4">
			<div class="user-info">
				<img src="${pageContext.request.contextPath}/img/users.jpg">
				<p>${house.user.name}</p>
				<div style="margin-left: 40px; margin-top: 20px;">等级：🎉🎉🎉🎉🎉</div>
				<div style="margin-left: 40px; margin-top: 20px;">
					<span>邮箱：${house.user.email}</span>
				</div>
				<button onclick="javascript:OpenDiv();"id="open">在线留言</button>
				<a tabindex="0" class="btn btn-lg btn-danger" role="button"
					data-toggle="popover" data-trigger="focus" 
					data-content="${house.user.phone}"
					>点击查看电话</a>
			</div>
		</div>
	</div>
	<div class="house-info">
		<div class="xinxi">
			<span style="font-size: 25px;">房屋信息</span>
			<p>
				发布时间：<span><fmt:formatDate pattern="yyyy年MM月dd日 HH:mm:ss" value="${house.updateTime}"/></span>
			</p>
		</div>
		<hr />
		<div class="neiron">
			<span class="p1">${house.price}<label style="font-size: 13px;">元/月</label></span>
			<span style="margin-left: 5px;">付1押1</span> <span
				style="margin-left: 20%">装修：精装修</span> <span
				style="margin-left: 20%">类型：普通住宅</span>
		</div>
		<div class="neiron">
			<span>户姓：${house.type.name}</span> <span style="margin-left: 5px;"></span> <span
				style="margin-left: 26%">配套：家电</span>
		</div>
		<div class="neiron">
			<span>楼层：${house.floor}楼 </span> <span style="margin-left: 5px;"></span> <span
				style="margin-left: 29%">要求：男女不限</span>
		</div>
		<div class="neiron">
			<span>小区：${house.photo.title}</span>
		</div>
	</div>
	<div class="house-info">
		<span style="font-size: 25px;">房源概况</span>
		<hr />
		<div>
			<span>${house.content}</span>
		</div>
	</div>
	<div class="house-info">
		<span style="font-size: 25px;">地图位置</span>
		<hr />
		<div id="l-map"></div>
	</div>
	<div class="clearfix"></div>
	<input type="hidden" value="${house.longitude}" id="longitude">
	<input type="hidden" value="${house.latitude}" id="latitude">
	

	<!-- ************分割***************** -->
	
		<div class="tanchuang" id="tanchuang">
		<div class="tope">
			<div class="toname">
			留言给:<span>${house.user.name}</span></div>
			
			<div class="guanbi">
			<a href="javascript:CloseDiv();"><strong>X</strong></a></div>
		</div>
		<br />
		<br />
		<div class="message">			
			<div class="liuyan">		
				用户：
			</div>
			<div class="liuyankuang">
				<textarea class="neirong" rows="10" cols="60"></textarea>
			</div>
		</div>
		<br/>
		<div class="send">
			<input type="hidden" value="${user.id}" id="toUserid">
			<input type="hidden" value="${house.user.id}" id="fromUserid">
			<input id="fasongxingxi" type="button" name="send" value="发送" />
		</div>
	</div>			
</div>


<script type="text/javascript">
    var map = new BMap.Map("l-map");
	var point = new BMap.Point($("#longitude").val(),$("#latitude").val());
	map.centerAndZoom(point, 19);
	var marker = new BMap.Marker(point);  // 创建标注
	// 将标注添加到地图中
    map.addOverlay(marker); 
</script>
<script>

	function OpenDiv() {
		$("#tanchuang").css("display","block");
		$("#page").css("z-Index","-1");
		$("#zhutiyemian").css("display","block");
		
	}
	function CloseDiv() {
		$("#tanchuang").css("display","none");
		$("#zhutiyemian").css("display","none");
		$("#page").css("z-Index","3");
	}
	
	function yanzheng(){
			var json = {
				"fromUser" :{id: $("#fromUserid").val()},
				"toUser" : {id:$("#toUserid").val()},
				"content" : $(".neirong").val()
			}
			$.ajax({
				type:"post", // get或者post
				url : "addMessage", // 请求的url地址						
				data:JSON.stringify(json),
				//dataType : "json", //json写了jq会帮我们转换成数组或者对象
				contentType:"application/json"						
			  })
			  $(".neirong").val("");
			  $("#tanchuang").css("display","none");
				$("#zhutiyemian").css("display","none");
				$("#page").css("z-Index","3");
	}
	
	function liuyanyanzheng(){
		if($("#toUserid").val()==""||$("#toUserid").val()==null){
			window.location.href="login";
			alert("请先登录");
		}
	}
	
	
	$(function(){
		$("#fasongxingxi").click(function() {
			liuyanyanzheng();
			if($(".neirong").val()==null || $(".neirong").val()==""){
				alert("輸入内容不能為空");	
				return false;
			}else{		
				yanzheng();					  					  
				}
			})
		});
	
</script>